import Taro, { Component, setNavigationBarTitle } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import './index.scss';
import { articleDetail } from '../../../services/article';
import NavigationBar from '../../../components/navigationBar/index';
import TabBar from '../../../components/tab-bar/index';
import din from './img/din.png';
// import { fullImgUrl, timeFormat } from '../../../utils/utils';


export default class Index extends Component {

  config = {
    navigationBarTitleText: '',
    navigationtBarHeight:'',
  }

  state = {
    content: null,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    showBtn: false,
    statusS: 4,
    bg:'',
  }

  componentWillMount() {
    const system = Taro.getSystemInfoSync();
    if (system.model==='iPhone XS Max'|| system.model==='iPhone X' || system.model==='iPhone XS' || system.model==='iPhone XR' || system.model==='iPhone 11' || system.model==='iPhone 12') {
      this.setState({
        navigationtBarHeight: 'btn-wrappers'
      })
    } else {
      this.setState({
        navigationtBarHeight: 'btn-wrapper'
      })
    }
    const pic = Taro.getStorageSync('MemberPic');
    pic.list.forEach(ele => {
      if(ele.key=='member_customization_backgroud'){
        this.setState({
          bg:ele.paths
        })
      }
    });
    const { id, showBtn = 0 } = this.$router.params;
    articleDetail({
      id
    }).then(res => {
      res.content = res.content.replace(/\<img/gi, '<img style="width: 100% !important; class="rich-img"');
      this.setState({
        content: res.content,
        showBtn: Boolean(showBtn),
      })
    })
  }
  componentDidMount() { }
  componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  callPhone() {
    Taro.makePhoneCall({
      phoneNumber: Taro.getStorageSync('setting').mobile
    })
  }

  render() {
    const { content, showBtn,bg,navigationBarHeight,navigationtBarHeight } = this.state;
    return (
      <View className="customized" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text={showBtn ? '定制' : ''} type="home" />
        <View className="content">
          <RichText className="rich-text" nodes={content}></RichText>
        </View>
        {showBtn && <Image className={navigationtBarHeight} src={din} onClick={this.callPhone}>
          {/* <View className="btn" >立即联系定制</View> */}
        </Image>}
        {/* <TabBar style="position: fixed;bottom: 0;left: 0;" statusS={this.state.statusS}></TabBar> */}
        <View className="tabbaruser">

          <TabBar statusS={this.state.statusS}></TabBar>
        </View>

      </View>
    );
  }
}
